<template>
    <div class="header_div">
        <router-link to="/">
            <img class="logo" :src="img" alt="">
        </router-link>
        <div class="header_right">
            <el-dropdown trigger="click">
                  <span class="el-dropdown-link">
                      <i class="el-icon-user-solid el-icon--right"></i>
                      {{user.name}}
                      <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="dialogFormVisible = true">
                        修改密码
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="loginOut">
                        退出
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>

        <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="30%">
            <el-form label-width="100px" :model="formPassword" label-position="left" :rules="rules">
                <el-form-item label="新密码" prop="newPassword">
                    <el-input type="password" v-model="formPassword.newPassword"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input type="password" v-model="formPassword.confirmPassword"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="changePassword">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</template>

<script>

    export default {
        name: "TopHeader",
        props:{

        },
        data(){
            return{
                img:require('@/assets/img/logo.png'),
                user:JSON.parse(localStorage.getItem("user")),
                dialogFormVisible:false,
                formPassword:{},
                rules: {
                    newPassword: [
                        {required: true, message: '请输入新密码', trigger: 'blur'},
                    ],
                    confirmPassword: [
                        {required: true, message: '请输入确认密码', trigger: 'blur'},
                        // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                },
            }
        },
        mounted(){

        },
        methods:{
            loginOut(){
                localStorage.removeItem("sid");
                localStorage.removeItem("user");
                this.$router.push('/cms/login');
                this.requestAxios.requestCMS('post','/api/logout.do',null,()=>{});
            },
            changePassword(){
                var that = this;
                if(this.formPassword.newPassword !== this.formPassword.confirmPassword){
                    alert("两次密码必须相同");
                    return false;
                }
                this.requestAxios.requestCMS('post','/manager/reset_pwd.do',{
                    pwd: this.$md5(this.formPassword.newPassword),
                },(response)=>{
                    alert("密码重置成功，请重新登录");
                    this.dialogFormVisible = false;
                    this.loginOut();
                });
            }
        }
    }
</script>

<style scoped>

    .el-dropdown-link{
        color:#fff;
    }
    .header_div{
        line-height: 60px;
    }
    .header_right{
        float: right;
    }
    .logo{
        width: 60px;
        height:60px;
    }
</style>
